:host {
  display: var(--bl-button-display, inline-block);
  max-width: 100%;
  position: relative;
}

.button {
  --main-color: var(--bl-color-primary);
  --main-hover-color: var(--bl-color-primary-highlight);
  --text-hover-color: var(--bl-color-neutral-lightest);
  --content-color: var(--bl-color-neutral-full);
  --bg-color: var(--main-color);
  --border-color: var(--main-color);
  --padding-vertical: var(--bl-size-2xs);
  --padding-horizontal: var(--bl-size-m);
  --margin-icon: var(--padding-vertical);
  --icon-size: var(--bl-size-m);
  --font: var(--bl-font-title-3-medium);
  --height: var(--bl-size-2xl);

  display: flex;
  gap: var(--margin-icon);
  justify-content: var(--bl-button-justify, center);
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--height);
  min-width: var(--height);
  border: solid 1px var(--border-color);
  border-radius: var(--bl-border-radius-m);
  text-decoration: none;
  padding: var(--padding-vertical) var(--padding-horizontal);
  cursor: pointer;
  background-color: var(--bg-color);
  color: var(--content-color);
  font: var(--font);
  font-kerning: none;
  user-select: none;
}

:host(:hover) .button {
  --bg-color: var(--main-hover-color);
  --border-color: var(--main-hover-color);
}

.label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:host([size="small"]) .button {
  --font: var(--bl-font-title-4-medium);
  --padding-vertical: var(--bl-size-3xs);
  --padding-horizontal: var(--bl-size-2xs);
  --icon-size: var(--bl-size-s);
  --height: var(--bl-size-xl);
}

:host([size="large"]) .button {
  --font: var(--bl-font-title-3-medium);
  --padding-vertical: var(--bl-size-xs);
  --padding-horizontal: var(--bl-size-xl);
  --margin-icon: var(--bl-size-2xs);
  --height: var(--bl-size-3xl);
}

.button:focus {
  outline: none;
}

.button:focus-visible {
  position: relative;
  outline: none;
}

.button:focus-visible::after {
  border: 2px solid var(--bl-button-focus-border-color, var(--main-color));
  border-radius: var(--bl-border-radius-l);
  content: "";
  position: absolute;
  inset: -4px;
}

:host ::slotted(bl-icon) {
  font-size: var(--icon-size);
}

:host([loading]) ::slotted(bl-icon) {
  display: none;
}

:host .has-icon:not(.has-content) {
  --padding-horizontal: var(--padding-vertical);
  --margin-icon: 0;
}

:host([variant="secondary"]) .button {
  --bg-color: transparent;
  --content-color: var(--main-color);
}

:host([variant="tertiary"]) .button {
  --content-color: var(--main-color);
  --border-color: transparent;
  --bg-color: transparent;
}

:host([kind="neutral"]) .button {
  --main-color: var(--bl-color-neutral-darker);
  --main-hover-color: var(--bl-color-neutral-darkest);
}

:host([kind="success"]) .button {
  --main-color: var(--bl-color-success);
  --main-hover-color: var(--bl-color-success-highlight);
}

:host([kind="danger"]) .button {
  --main-color: var(--bl-color-danger);
  --main-hover-color: var(--bl-color-danger-highlight);
}

:host([disabled]) {
  cursor: not-allowed;
}

:host([loading]) {
  cursor: wait;
}

:host .button[aria-disabled="true"] {
  --main-color: var(--bl-color-neutral-lightest);
  --main-hover-color: var(--bl-color-neutral-lightest);
  --content-color: var(--bl-color-neutral-lighter);
  --bg-color: var(--main-color);

  pointer-events: none;
  text-decoration: none;
}

:host([variant="tertiary"]) .button[aria-disabled="true"] {
  --main-color: transparent;
}

:host([variant="secondary"]:hover) .button[aria-disabled="false"] {
  --content-color: var(--bl-color-neutral-full);
  --bg-color: var(--main-hover-color);
}

:host([variant="tertiary"]:hover) .button[aria-disabled="false"] {
  --content-color: var(--main-hover-color);
  --bg-color: var(--text-hover-color);
}

:host([dropdown]) .open {
  display: none;
}

:host([dropdown]) .active .open {
  display: inline-block;
}

:host([dropdown]) .active .close {
  display: none;
}

:host .active.button {
  --bg-color: var(--main-hover-color);
  --border-color: var(--main-hover-color);
}

:host([variant="secondary"]) .active.button {
  --content-color: var(--bl-color-neutral-full);
  --bg-color: var(--main-hover-color);
}

:host([variant="tertiary"]) .active.button {
  --content-color: var(--main-color);
  --bg-color: var(--bl-color-neutral-lightest);
  --border-color: transparent;
}
